
@import "reset.scss";
@import "datetimepicker.css";
@import "font/iconfont.css";

body{
	background-image: url(../images/bg1.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}

/* 清除浮动 */
%clearfix{
    *zoom: 1;
    &:before,
    &:after {
        content: " ";
        display: block;
    }
    &:after {
        clear: both;
    }
}
.w50{
	width: 50px;
}
.w100{
	width: 100px;
}
.w150{
	width: 150px;
}
.text-center{
	text-align: center;
}
.cursor-pointer{
	cursor: pointer;
}

/* 改变谷歌浏览器默认滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: #838383;
    opacity: .8;
    border-radius: 5px;
    cursor: -webkit-grab;
    cursor: grab;
}
/* 滚动条背景 */
::-webkit-scrollbar-track-piece{  

   background-color: transparent; 

} 
::-webkit-scrollbar-thumb:hover {
    background: #838383;
    opacity: .8;
}
::-webkit-scrollbar-thumb:active {
    background: #838383;
    opacity: .8;
}


/* 登录页 */
.loginBox{
	width: 400px;
	height: 200px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);

	border-radius: 10px;
	background-color: #fff;
	padding: 30px;
	input{
		outline: none;
		width: 100%;
		height: 40px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 10px;
	}
	img{
		width: 120px;
		margin-left: -60px;
		position: absolute;
		top: -80px;
		left: 50%;
	}
	.loginButton{
		text-align: center;
	}
	button{
		width: 60px;
		height: 30px;
		border-radius: 5px;
		background-color: rgb(0, 142, 173);
		text-align: center;
		color: #fff;
		outline: none;
		cursor: pointer;
	}
}

.home{
	position: fixed;
	left: 50%;
	top: 300px;

	width: 800px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);

	line-height: 26px;
	color: #fff;
	font-size: 18px;

	p{
		margin-top: 20px;
		text-align: right;
		font-size: 16px;
		text-shadow:
		  0 0 10px rgba(255,255,255, 1),
		  0 0 50px rgba(255, 255, 255, .8),
		  0 0 75px rgba(255, 255, 255, .6),
		  0 0 76px rgba(255, 255, 255, .4),
		  0 0 77px rgba(255, 255, 255, .5),
		  0 0 78px rgba(255, 255, 255, .4),
		  0 0 79px rgba(255, 255, 255, .3),
		  0 0 80px rgba(255, 255, 255, .2),
		  0 0 85px rgba(255, 255, 255, .1);
	}
	.baike{
		cursor: pointer;
		color: #fff;
		&:hover{
			text-decoration: underline;
		}
	}
	.logout{
		position: fixed;
		right: -200px;
		top: -200px;
		color: #fff;
		cursor: pointer;
		margin: 0;
	}
}

/* 管理页 */
.administrator{
	position: relative;

	h5{
		position: fixed;
		left: 100px;
		top: 120px;
		
		width: 200px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		color: #fff;
		font-size: 14px;
		.logout{
			cursor: pointer;
			margin-left: 20px;
			text-decoration: underline;
		}
	}
	.option-list{
		position: fixed;
		top: 150px;
		left: 100px;
		li{
			width: 200px;
			height: 50px;
			margin-bottom: 10px;
			line-height: 50px;
			text-align: center;
			font-size: 14px;
			color: #fff;
			cursor: pointer;

			position: relative;
			background: rgba(255, 255, 255, .27);
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 1px;
			border: none;
			
			&:after,&:before{
				content: "";
				position:absolute;
				background:none;
				transition:all .5s ease-in-out;
			}
			&:after{
				top:0;
				left:0;
				border-left:1px solid white;
				border-top:1px solid white;
				width:30px;
				height:30px;
			}
			&:before{
				bottom:0;
				right:0;
				border-right:1px solid white;
				border-bottom:1px solid white;
				width:30px;
				height:30px;
			}
			&:hover,&.active{
				&:after,&:before{
					width:205px;
					height:55px;
				}
			}
			&.active{
				text-shadow:
				  0 0 10px rgba(255,255,255, 1),
				  0 0 50px rgba(255, 255, 255, .8),
				  0 0 75px rgba(255, 255, 255, .6),
				  0 0 76px rgba(255, 255, 255, .4),
				  0 0 77px rgba(255, 255, 255, .5),
				  0 0 78px rgba(255, 255, 255, .4),
				  0 0 79px rgba(255, 255, 255, .3),
				  0 0 80px rgba(255, 255, 255, .2),
				  0 0 85px rgba(255, 255, 255, .1);
			}
		}
	}
	.option-content{
		position: fixed;
		left: 350px;
		right: 100px;
		top: 150px;
		bottom: 150px;
		&>li{
			display: none;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			min-height: 260px;

			padding: 20px;
			background: #f2f2f2;
			overflow: hidden;
			border-radius: 5px;
			border: 1px solid transparent;
		}
		/* 录入 */
		.record{
			.record-input{
				position: absolute;
				left: 20px;
				top: 20px;
				bottom: 40px;
				width: 40%;

				padding: 10px;
				outline: none;
				resize: none;
				line-height: 14px;
			}
			.record-output{
				position: absolute;
				right: 20px;
				top: 20px;
				bottom: 40px;

				width: 60%;
				padding-left: 60px;
				overflow: auto;
				line-height: 18px;
				li{
					margin-bottom: 10px;
				}

				label,span,p{
					display: inline-block;
				}
				label{
					width: 20%;
					vertical-align: -2px;
				    cursor: pointer;
				}
				p{
					width: 75%;
					vertical-align: top;
				}
				span{
					margin-left: 5px;
				}
			}
			.record-submit{
				position: absolute;
				bottom: 10px;
				right: 30%;
				margin-right: -30px;

				width: 60px;
				height: 30px;
				line-height: 30px;
				border-radius: 5px;
				background-color: rgb(0, 142, 173);
				text-align: center;
				color: #fff;
				outline: none;
				cursor: pointer;
			}
		}
		/* 复核 */
		.reexamine{
			.reexamine-filtrate{
				position: absolute;
				left: 20px;
				top: 20px;
				width: 60%;
				@extend %clearfix;
				&>li{
					float: left;
					width: 25%;
					margin-right: 10px;
				}
				button{
					color: #fff;
					background-color: #008ead;
					vertical-align: middle;
					border-radius: 4px;
					white-space: nowrap;
					position: absolute;
					height: 40px;
					line-height: 40px;
					text-align: center;
					border: 1px solid #dcdfe6;
					outline: none;
					cursor: pointer;
					padding: 0 10px;
					font-size: 14px;
				}
			}
			.reexamine-list{
				position: absolute;
				left: 0;
				top: 70px;
				bottom: 40px;
				width: 60%;
				padding-left: 20px;
				overflow-y: auto;
				table tbody tr:hover{
					cursor: pointer;
				}
			}
			.reexamine-option{
				position: absolute;
				right: 0;
				top: 70px;
				bottom: 40px;
				width: 40%;
				padding-left: 20px;
				padding-right: 20px;
				overflow-y: auto;
				a:hover{
					text-decoration: underline;
				}
				table tbody tr:hover{
					background-color: transparent;
				}
				.form-input{
					width: 200px;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				.reexamine-operation{
					text-align: center;
				}
			}
		}
		/* 配置 */
		.configuration{
			.configuration-list{
				text-align: center;
				overflow-y: auto;
				width: 40%;

				position: absolute;
				left: 20px;
				top: 20px;
				bottom: 40px;
				z-index: 1;
			}
			.configuration-option{
				position: absolute;
				right: 20px;
				top: 20px;
				bottom: 40px;

				width: 60%;
				padding-left: 60px;
				overflow: auto;
				line-height: 18px;
				&>ul{
					@extend %clearfix;
					&>li{
						float: left;
						width: 50%;
						padding: 0 20px;
						margin-bottom: 20px;
						position: relative;
					}
				}
				label{
					color: #000;
					line-height: 40px;
					span{
						vertical-align: 2px;
					}
				}
				.configuration-container{
					text-align: center;
					.compile{
						display: none;
					}
					&.compile-flag{
						.compile{
							display: block;
						}
						.add{
							display: none;
						}
					}
				}
			}
		}
	}
}

/* 弹框 */
.dialog{
	position: fixed;
	right: 20px;
	top: 50px;

	li{
		min-width: 180px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: #007bff;
		background-color: #e6f3ff;
		border-radius: 5px;
		margin-bottom: 10px;
		display: none;
		padding: 0 10px;
	}
}

/* 表格 */
.table{
	width: 100%;
	line-height: 18px;
	color: rgb(51, 51, 51);
	thead{
		border-bottom: 2px solid #ddd;
	}
	th,td{
		padding: 10px;
	}
	tbody tr:hover{
		background-color: #ccc;
	}
	tbody tr.active{
		background-color: #ccc;
	}
	.change,.delete{
		padding: 10px;
		color: #fff;
		border-radius: 50%;
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #fff;
		border: 1px solid #dcdfe6;
		border-color: #dcdfe6;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		i{
			font-size: 14px;
		}
	}
	.change{
		background-color: #409eff;
		border-color: #409eff;
		&:hover{
			background: #66b1ff;
			border-color: #66b1ff;
			color: #fff;
		}
	}
	.delete{
		background-color: #f56c6c;
		border-color: #f56c6c;
		&:hover{
			background: #f78989;
			border-color: #f78989;
			color: #fff;
		}
	}
}

/* input */
.form-input{
	width: 100%;
    font-size: 14px;
	position: relative;
    display: inline-block;
    div{
    	color: #909399;
    	background-color: #f5f7fa;
    	vertical-align: middle;
    	border-radius: 4px;
    	white-space: nowrap;
    	position: absolute;
    	height: 40px;
    	line-height: 40px;
    	width: 80px;
    	text-align: center;
    	border: 1px solid #dcdfe6;
    	border-top-right-radius: 0;
    	border-bottom-right-radius: 0;
    }
    input{
    	background-color: #fff;
    	background-image: none;
    	border-radius: 4px;
    	border: 1px solid #dcdfe6;
    	box-sizing: border-box;
    	color: #606266;
    	display: inline-block;
    	height: 40px;
    	line-height: 40px;
    	outline: none;
    	padding-right: 15px;
    	padding-left: 95px;
    	width: 100%;
    	transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    ul{
    	position: absolute;
    	left: 100px;
    	right: 20px;
    	top: 44px;
    	display: none;
    	&.no-padding{
    		left: 80px;
    		right: 0;
    	}

    	border-radius: 4px;
    	border: 1px solid #dcdfe6;
    	background-color: #fff;
    	z-index: 1;
    	li{
    		height: 30px;
    		line-height: 30px;
    		padding-left: 10px;
    		color: #909399;
    		cursor: pointer;
    		&:hover{
    			background-color: #f5f7fa;
    		}
    	}
    }
}
.input{
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	outline: none;
	padding-right: 15px;
	padding-left: 15px;
	width: 100%;
	transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}

/* button */
.btn{
	height: 30px;
	border-radius: 5px;
	padding: 0 10px;
	background-color: rgb(0, 142, 173);
	text-align: center;
	color: #fff;
	outline: none;
	cursor: pointer;
	&:disabled{
	    opacity: .6;
	    color: #2C2C2E;
	    background-color: #ccc;
	    cursor: url(../images/cursor-disabled.png),auto;
	}
}

/* checkbox */
.btn-checkbox{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-transition: left .3s,background-color .3s;
    -moz-transition: left .3s,background-color .3s;
    -ms-transition: left .3s,background-color .3s;
    -o-transition: left .3s,background-color .3s;
    transition: left .3s,background-color .3s;
	font-family:"iconfont" !important;
	font-size:16px;font-style:normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
    &:before{
        content: "\e636";
        color: #838383;
        width: 16px;
        height: 16px;
        border-radius: 2px;
    }
    &:hover:before{
        color: #C7C7C7;
    }
    &:checked:before{
        content: "\e633";
        color: #D4B883;
    }
}
/* radio */
.btn-radio{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-transition: left .3s,background-color .3s;
    -moz-transition: left .3s,background-color .3s;
    -ms-transition: left .3s,background-color .3s;
    -o-transition: left .3s,background-color .3s;
    transition: left .3s,background-color .3s;
	font-family:"iconfont" !important;
	font-size:16px;font-style:normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    &:before{
        content: "\e649";
        color: #838383;
        width: 16px;
        height: 16px;
        border-radius: 8px;
    }
    &:hover:before{
        color: #C7C7C7;
    }
    &:checked:before{
        content: "\e640";
        color: #D4B883;
    }
}